<template>
	<view class="com-nav-bar" :elevation="typeof shadow == 'boolean' && shadow ? '1px' : shadow"
	:style="{'background-color': bgColor,
	'border-bottom-width': border ? '1px' : '',
	'border-bottom-style': border ? 'solid' : '',
	'border-bottom-color': borderColor}">
		<com-status-bar :color="statusColor"></com-status-bar>
		<view class="com-nav-bar-top y-flex y-row y-align-center page-padding-gap">
			<slot name="left">
				<view @click="customBack" v-if="backShow">
					<com-icon name="back_android" :color="color" weight="bold" size="50"></com-icon>
				</view>
			</slot>
			<slot name="title">
				<com-text lines="1" class="y-flex-1" :class="{'ml-20': backShow}" weight="bold" line-height="35" size="35" :color="color" :value="title"></com-text>
			</slot>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#222'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			shadow: {
				type: [Boolean, String, Number],
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			statusColor: {
				type: String,
				default: 'rgba(0,0,0,.5)'
			},
			backShow: {
				type: Boolean,
				default: true
			},
			customBack: {
				type: Function,
				default: () => {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style>
	.com-nav-bar-top {
		height: 100rpx;
	}
</style>